<template>
<view class="container">

  <view class="orders-switch">
    <view :class="'item ' + ( giftType == 1 ? 'active' : '')" @tap="switchTab" data-index="1">
      <view class="txt">我赠送的订单</view>
    </view>
    <view :class="'item ' + ( giftType == 0 ? 'active' : '')" @tap="switchTab" data-index="0">
      <view class="txt">我收到的订单</view>
    </view>
  </view>
  <view class="no-order" v-if="orderList.length <= 0">
    <view class="c">
      <image src="/static/static/images/noCart_old.png"></image>
      <text>尚未有任何赠送订单</text>
    </view>
  </view>

  <view class="orders">
    <view v-for="(item, index) in orderList" :key="index" class="order" open-type="redirect">
      
      <navigator :url="'../fetchOrderDetail/fetchOrderDetail?id=' + item.id + '&isShared=1'" class="h">
        <view class="l">订单编号：{{item.orderSn}}</view>
        <view class="r">{{item.orderStatusText}}</view>
      </navigator>
      <navigator v-for="(gitem, index2) in item.goodsList" :key="index2" :url="'../fetchOrderDetail/fetchOrderDetail?id=' + item.id + '&isShared=1'" class="goods">
        <view class="img">
          <image :src="gitem.picUrl"></image>
        </view>
        <view class="info">
          <text class="name">{{gitem.goodsName}}</text>
        </view>
        <view class="status"></view>
      </navigator>
      <view class="b">
        <view class="l price">实付：￥{{item.actualPrice}}</view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
const util = require("../../../utils/util.js");
const api = require("../../../config/api.js");

export default {
  data() {
    return {
      orderList: [],
      page: 1,
      size: 10,
      giftType: 1,
      totalPages: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      giftType: options.giftType ? options.giftType : 1
    });
  },

  onReachBottom() {
    if (this.totalPages > this.page) {
      this.setData({
        page: this.page + 1
      });
      this.getOrderList();
    } else {
      uni.showToast({
        title: '没有更多订单了',
        icon: 'none',
        duration: 2000
      });
      return false;
    }
  },

  onReady: function () {// 页面渲染完成
  },
  onShow: function () {
    // 页面显示
    this.setData({
      orderList: []
    });
    this.getOrderList();
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
    getOrderList() {
      let that = this;
      util.request(api.GiftOrderList, {
        giftType: that.giftType,
        page: that.page,
        size: that.size
      }).then(function (res) {
        if (res.errno === 0) {
          console.log(res.data);
          that.setData({
            orderList: that.orderList.concat(res.data.data),
            totalPages: res.data.totalPages
          });
        }
      });
    },

    switchTab: function (event) {
      let giftType = event.currentTarget.dataset.index;
      this.setData({
        orderList: [],
        giftType: giftType,
        page: 1,
        size: 10,
        totalPages: 1
      });
      this.getOrderList();
    }
  }
};
</script>
<style>
page {
  height: 100%;
  width: 100%;
  background: #f4f4f4;
}

.orders-switch {
  width: 100%;
  background: #fff;
  height: 84rpx;
}

.orders-switch .item {
  display: inline-block;
  height: 82rpx;
  width: 50%;
  padding: 0 15rpx;
  text-align: center;
}

.orders-switch .item .txt {
  display: inline-block;
  height: 82rpx;
  padding: 0 20rpx;
  line-height: 82rpx;
  color: #9a9ba1;
  font-size: 30rpx;
  width: 100%;
}

.orders-switch .item.active .txt {
  color: #FF654B;
  border-bottom: 3rpx solid #FF654B;
}

.no-order {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.no-order .c {
  width: 100%;
  height: auto;
  margin-top: 200rpx;
}

.no-order .c image {
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 258rpx;
  height: 258rpx;
}

.no-order .c text {
  margin: 0 auto;
  display: block;
  width: 258rpx;
  height: 29rpx;
  line-height: 29rpx;
  text-align: center;
  font-size: 29rpx;
  color: #999;
}

.orders {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.order {
  margin-top: 20rpx;
  background: #fff;
}

.order .h {
  height: 83.3rpx;
  line-height: 83.3rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
  border-bottom: 1px solid #f4f4f4;
  font-size: 30rpx;
  color: #333;
}

.order .h .l {
  float: left;
}

.order .h .r {
  float: right;
  color: #b4282d;
  font-size: 24rpx;
}

.order .goods {
  display: flex;
  align-items: center;
  height: 199rpx;
  margin-left: 31.25rpx;
}

.order .goods .img {
  height: 145.83rpx;
  width: 145.83rpx;
  background: #f4f4f4;
}

.order .goods .img image {
  height: 145.83rpx;
  width: 145.83rpx;
}

.order .goods .info {
  height: 145.83rpx;
  flex: 1;
  padding-left: 20rpx;
}

.order .goods .name {
  margin-top: 30rpx;
  display: block;
  height: 44rpx;
  line-height: 44rpx;
  color: #333;
  font-size: 30rpx;
}

.order .goods .number {
  display: block;
  height: 37rpx;
  line-height: 37rpx;
  color: #666;
  font-size: 25rpx;
}

.order .goods .status {
  width: 105rpx;
  color: #b4282d;
  font-size: 25rpx;
}

.order .b {
  height: 103rpx;
  line-height: 103rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
  border-top: 1px solid #f4f4f4;
  font-size: 30rpx;
  color: #333;
}

.order .b .l {
  float: left;
}

.order .b .r {
  float: right;
}

.order .b .btn {
  margin-top: 19rpx;
  height: 64.5rpx;
  line-height: 64.5rpx;
  text-align: center;
  padding: 0 20rpx;
  border-radius: 5rpx;
  font-size: 28rpx;
  color: #fff;
  background: #b4282d;
}

.price{
  font-size: 28rpx;
  color: #b4282d;
}
</style>